<template>
  <div :class="isMobile ? 'w50' : 'w33'" class="vote_option mt08">
    <div class="p8" @click="jumpDetail()">
      <VanImage
        :src="getImg"
        fit="cover"
        height="14rem"
        lazy-load
        width="100%"
      />
      <h4 class="f17 mt05">{{ prop.voteItem.candidateName }}</h4>
      <p class="mt05">作者：{{ prop.voteItem.authorName || "--" }}</p>
    </div>
    <!-- 普通投票结果 -->
    <p v-if="voteInfo.appBizVoteSetting.voteType === 'normal'" class="mt05">
      <span class="f15 fw500">{{ prop.voteItem.vote || 0 }}</span>
      <span class="f12 desc">票</span>
    </p>
    <!-- 决议投票结果 -->
    <p
      v-else-if="voteInfo.appBizVoteSetting.isPublicResult === 'Y'"
      class="mt05"
    >
      <span class="f15 fw500">{{ prop.voteItem.agreeVote || 0 }}</span>
      <span class="f12 desc">赞成</span>
      <span class="f15 fw500 ml10">{{ prop.voteItem.againstVote || 0 }}</span>
      <span class="f12 desc">不赞成</span>
    </p>
    <ActiveBtn :voteItem="prop.voteItem" @submit="handleSubmit()" />
  </div>
</template>
<script setup>
import { commonStore } from "@/stores/common.js";
import { storeToRefs } from "pinia";
import { Image as VanImage } from "vant";
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import ActiveBtn from "./activeBtn.vue";
import { store } from "./store.js";

const commonStores = commonStore();
const { isMobile } = storeToRefs(commonStores);
const voteInfo = ref(store.voteInfo);
const router = useRouter();
const route = useRoute();
const prop = defineProps(["voteItem", "checkList"]);
const emit = defineEmits(["handleSubmit"]);
// 选中
const handleSubmit = () => emit("handleSubmit");
// 跳转
const jumpDetail = () => {
  router.push({
    name: "VoteItemDetail",
    query: {
      voteId: voteInfo.value.appBizVote.voteId,
      candidateId: prop.voteItem.candidateId,
      ...route.query,
    },
  });
};
// 获取图片
const getImg = computed(() => {
  return prop.voteItem.sloganUrl?.split("split")[0];
});
</script>
<style scoped>
.vote_option {
  border: 1px solid var(--van-gray-4);
  border-radius: 0.4rem;
  overflow: hidden;
  background: var(--van-white);
  margin-right: 0.8rem;
}

.w33 {
  width: calc(33.33% - 0.8rem);
}

.w33:nth-child(3n) {
  margin-right: 0;
}

.w50 {
  width: calc(50% - 0.8rem);
}

.w50:nth-child(2n) {
  margin-right: 0;
}

.vote_option img {
  width: 100%;
  height: 14rem;
  object-fit: cover;
}

.vote_option > h4,
.vote_option > p,
.vote_option > .p8 h4,
.vote_option > .p8 p {
  padding: 0 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>